
import React, { Component,  } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../actions'
import Container from '../../components/Container'
import SwipeImage from '../../components/SwipeImage'
import SpecModal from './coms/specModal';
import msg from '../../components/Message'
import MeScrollContainer from '../../components/MeScroll'
/*
params.type=1:赠品，type=2:兑换商品
 */
class Goods extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state={
      visible:false
    }
  }
  componentDidMount(){
    let {actions,params} = this.props
    actions.getSubGoodsInfo({goods_id:params.id})
    
  }

  onClickChoose(){
    let {subGoodsInfo,params} =this.props
    if(subGoodsInfo.goods_spec.length>0){
      this.setState({
        visible:true
      })
    }else{

    }
    
  }

  //有sku时，回调onOK事件
  callbackOnOk(data){
    let {actions,params,addCartInfo,subGoodsInfo} = this.props
    console.log(addCartInfo)
    if(!addCartInfo.goods_num){
      msg.info('please choose main goods first',0)
      return
    }

    //判断附属商品数量不能大于主商品数量
    /*if(addCartInfo.goods_num < data.goods_num){
      msg.info('The number of gift / exchange goods should not be larger than the number of main goods',0)
      return
    }*/
    
    let _data={
      goods_id: params.id,
      goods_name: subGoodsInfo.goods_name,
      goods_price:subGoodsInfo.goods_price,
      goods_image:subGoodsInfo.goods_image
    }
    data={...data,..._data}

    if(params.type == 1){
      actions.addCart({gift_goods:data})
    }else{
      actions.addCart({exchange_goods:data})
    }
    this.context.router.history.goBack()
    
  }
  
  
  
   render(){
    let {subGoodsInfo,params} =this.props
    let {visible} =this.state
    return(
        <Container >
         <MeScrollContainer>
          <section className='goods-container'>
            {this.renderSwipe(subGoodsInfo)}
            {this.renderInfo(subGoodsInfo)}
            {this.renderDetail(subGoodsInfo)}
            {this.renderBottom(subGoodsInfo)}
          </section>
          </MeScrollContainer>
          {/*sku 弹框*/}
          {
            subGoodsInfo.goods_spec?
            <SpecModal onClose={(key)=>{ this.setState({[key]:false })}} 
                      onOK={(data)=>{ this.callbackOnOk(data) }}
                      visible={visible} 
                      data={subGoodsInfo.goods_spec}
                      type={'subGoods'}
                      isFree={params.type==1?true:false}
            />
            :null
          }
        </Container>
    )
  }
  // 图片轮播
  renderSwipe(goodsInfo){
    if(!goodsInfo.head_imgs) return null

    return <SwipeImage height={'300px'} bannelThumbImgs={goodsInfo.head_imgs} loop={true}
     onTouch={(item)=>{
      
      
    }} />
  }
  // 商品信息
  renderInfo(goodsInfo){
    return(
      <div className="li-de-info">
        <div className="li-de-left">
          <div className="name">{goodsInfo.goods_name}</div>
          <div className="price">
          <span>$ {goodsInfo.goods_price||0}</span>
          </div>
        </div>
        
      </div>
    )
  }
  // 商品详情
  renderDetail(goodsInfo){
    if(!goodsInfo.image) return null
    return(
      <div className="li-de-context">
        <div className="li-de-title"><span className="line"></span>DETAIL<span className="line"></span></div>
          <div className="li-de-detail">
              {
                goodsInfo.image.map((item,i)=>{
                  return(
                    <div key={i}>
                      <img src={item.image_name} alt=""/>
                    </div>
                  )
                })
              }
            </div>
      </div>
    )
  }
  // 底部按钮
  renderBottom(goodsInfo){
    return(
      <div className="bottom bordertop">
        <div className="li-chunks-btns">
          <div className="li-chunk-btn btn2" onClick={this.onClickChoose.bind(this)}>add to cart</div>
        </div>
      </div>
    )
  }
 
 
}


function mapStateToProps(state){
  
  return {
    subGoodsInfo:state.subGoodsInfo.toJS(),
    addCartInfo:state.addCartInfo.toJS()
  }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}
export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(Goods)
